<template>
    <div class="">
        <div class="accountPos">
            <span>登录密码</span>
            <p>初始密码由业务员分配，如忘记初始密码请请直接点击"<a href="/find">忘记登录密码</a>"找回</p>
        </div>
        <div class="changeBox">
            <ul>
                <li :class="{ error: validation.hasError('oldPass') }">
                    <span>原密码</span>
                    <input type="password" id="oldPass" name="oldPass" v-model="oldPass">
                    <div class="error-tips">{{ validation.firstError('oldPass') }}</div>
                </li>
                <li :class="{ error: validation.hasError('newPass') }">
                    <span>新密码</span>
                    <input type="password" id="newPass" name="newPass" v-model="newPass">
                    <div class="error-tips">{{ validation.firstError('newPass') }}</div>
                </li>
                <li :class="{ error: validation.hasError('sureNewPass') }">
                    <span>设置新密码</span>
                    <input type="password" id="sureNewPass" name="sureNewPass" v-model="sureNewPass">
                    <div class="error-tips">{{ validation.firstError('sureNewPass') }}</div>
                </li>
                <li>
                    <input type="submit" value="确认提交" @click="submit" :disabled="isDisabled">
                    <input type="reset" value="取消" @click="reset">
                    <div class="error-tips" v-text="apiError"></div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import Api from '../api/api'
    const api = new Api();
    import simpleVueValidator from 'simple-vue-validator'
    let Validator = simpleVueValidator.Validator;
    export default {
        data(){
            return {
                oldPass: '',
                newPass: '',
                sureNewPass: '',
                apiError: '',
                isDisabled: false
            }
        },
        validators: {
            oldPass(value){
                return Validator.value(value).required('原密码不能为空').custom(()=>{
                    if(!Validator.isEmpty(value)){
                        if(value.length<8 || value.length>20){
                            return '密码长度为8-20位！'
                        }
                    }
                })
            },
            newPass(value){
                return Validator.value(value).required('新密码不能为空').custom(()=>{
                    if(!Validator.isEmpty(value)){
                        if(value.length<8 || value.length>20){
                            return '密码长度为8-20位！'
                        }
                    }
                })
            },
            'sureNewPass,newPass'(sureNewPass,newPass){
                if(this.validation.isTouched('sureNewPass')){
                    return Validator.value(sureNewPass).required().match(newPass,'您输入的密码与新密码不相同');
                }
            }
        },
        methods:{
            submit(){
                this.apiError='';
                this.isDisabled=true;
                this.$validate()
                    .then(success=>{
                        if (success) {
                            let param={
                                token: sessionStorage.getItem('token'),
                                oldPassword: this.oldPass,
                                newPassword1: this.newPass,
                                newPassword2: this.sureNewPass
                            };
                            api.changePass(param).then(res=>{
                                if(res.data.success){
                                    sessionStorage.removeItem('token');
                                    this.$router.replace({ path: '/login'});
                                }else{
                                    this.apiError=res.data.cause
                                }
                                this.isDisabled=false
                            })
                        }
                    });
            },
            reset(){
                this.oldPass='';
                this.newPass='';
                this.sureNewPass='';
                this.validation.reset();
            }
        }
    }
</script>
<style>
    .error-tips{ color: red;}
</style>